<template>
  <div class="home">
    <div class="item-box">
      <div>{{ content1.split(',').map(m => `777${m}`) }}</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'

  export default defineComponent({
    name: 'Home',
    props: {
      // 启用了类型推导
      message: String
    },
    components: {},
    setup(props) {
      // 接收props参数，需要转换为响应式变量，否则会报错
      // ref的变量改值，需要 .value =
      // reactive中变量改值无需 .value =
      const state = reactive({
        pMes: props.message // String || undefined
      })
      const content1 = '你,是,好,人'
      return {
        state,
        content1
      }
    }
  })
</script>

<style scoped lang="less">
  .home {
    display: flex;
    .item-box {
      width: 33.33%;
      height: calc(100vh - 2px);
    }
    .item-box:nth-of-type(2n + 1) {
      border: 1px solid greenyellow;
    }
  }
</style>
